import React, {Component} from 'react';
import { Form, Input, Checkbox, Button, Tabs} from "antd";
import { UserOutlined, LockOutlined} from '@ant-design/icons';
import { userLogin } from "../../api/user";
import { connect} from 'react-redux'
import { withRouter} from 'react-router-dom'
import { getAdmin, loading, exit } from './../../actions/admin'
import {getUsers, loading as userLoading} from "../../actions/users";
import './login.less'

const { TabPane } = Tabs;
const mapStateToProps = (state,props) => {
    return {
        isManagerLogin: state.admin.isLogin,
        isManagerLoading: state.admin.isLoading,
        isUserLogin: state.user.isLogin,
        isUserLoading: state.user.isLoading,
        data: state
    }
}

const mapDispatchToProps = (dispatch,props) => {
    return {
        adminLogin: (data) => {
            getAdmin(dispatch,data);
        },
        adminLoading: () => {
            dispatch(loading());
        },
        userLogin: data => {
            dispatch(getUsers(data));
        },
        userLoading: () => {
            dispatch(userLoading())
        },
        userExit: () => {
            dispatch(exit())
        }
    }
}

@connect(mapStateToProps,mapDispatchToProps)
@withRouter
class Index extends Component {
    constructor(props) {
        super(props);
        this.userRef = React.createRef();
    }

    onFinishManager = async (values) => {
        this.props.adminLoading();
        await this.props.adminLogin(values);
        setTimeout(() => {
            this.init();
        },1000)
    }

    onFinishUser = async (values) => {
        this.props.userLoading();
        const { number, passWord, remember} = values;
        await userLogin({number,passWord}).then(res => {
            this.props.userLogin(res.data)
            window.localStorage.setItem('remember',JSON.stringify(remember))
            if (remember){
                window.localStorage.setItem('isUserLogin',JSON.stringify(true))
                window.localStorage.setItem('userInfo',JSON.stringify(res.data))
            }else{
                window.sessionStorage.setItem('isUserLogin',JSON.stringify(true))
                window.sessionStorage.setItem('userInfo',JSON.stringify(res.data))
            }
        }).catch(err => {
            console.log(err)
            this.props.userExit();
        }).finally(() => {
            if (this.props.isUserLogin){
                this.props.history.push('/user/homepage')
            }
        })
    }

    callback = (key) => {
       /* console.log(key)*/
    }

    register = async () => {
        await this.props.history.push('/register')
    }

    init = () => {
        this.userRef.current.setFieldsValue({
            remember: JSON.parse(window.localStorage.getItem('remember'))
        })
        if (this.props.isManagerLogin){
            this.props.history.push('/admin/carInformation')
        }else if (this.props.isUserLogin){
            this.props.history.push('/user/homepage')
        }
    }

    componentDidMount() {
        this.init();
    }

    render() {
        return (
            <div className='mod_div'>
                <Tabs
                    defaultActiveKey="1"
                    onChange={this.callback}
                    className='mod_login'
                >
                    <TabPane tab="用户登录" key="1">
                        <Form
                            name="normal_login"
                            className="login-form mod_form"
                            initialValues={{ remember: true }}
                            ref={this.userRef}
                            onFinish={this.onFinishUser}
                            wrapperCol={{span: 6,offset:9}}
                        >
                            <Form.Item
                                name="number"
                                rules={[{ required: true, message: 'Please input your Username!' }]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                            </Form.Item>
                            <Form.Item
                                name="passWord"
                                rules={[{ required: true, message: 'Please input your Password!' }]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="passWord"
                                    placeholder="输入密码"
                                />
                            </Form.Item>
                            <Form.Item name="remember" valuePropName="checked">
                                <Checkbox>记住我</Checkbox>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                        <div className='register'>
                            <span>没账号？</span>
                            <button className='mod_register' onClick={this.register}>点击注册</button>
                        </div>
                    </TabPane>
                    <TabPane tab="管理员登录" key="2">
                        <Form
                            name="manager_login"
                            className="login-form mod_form"
                            initialValues={{ remember: true }}
                            onFinish={this.onFinishManager}
                            wrapperCol={{span: 6,offset:9}}
                        >
                            <Form.Item
                                name="number"
                                disabled={this.props.isManagerLoading}
                                rules={[{ required: true, message: 'Please input your Username!' }]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="账号" />
                            </Form.Item>
                            <Form.Item
                                name="password"
                                disabled={this.props.isManagerLoading}
                                rules={[{ required: true, message: 'Please input your Password!' }]}
                            >
                                <Input
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    type="passWord"
                                    placeholder="输入密码"
                                />
                            </Form.Item>
                            <Form.Item name="remember" valuePropName="checked">
                                <Checkbox value={JSON.parse(window.localStorage.getItem('remember'))}>记住我</Checkbox>
                            </Form.Item>

                            <Form.Item>
                                <Button type="primary" loading={this.props.isManagerLoading} htmlType="submit" className="login-form-button">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}

export default Index;